<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="root"  style="width: 100px; height: 100px;background-color: black"  @click="test">
    <!-- 阻止冒泡事件-->
    <button @click:prevent="test">提交</button>

</div>

<div id="test" @click="change">
    <h2>
        点击我修改数据：{{message}} -------- {{address}}
    </h2>
</div>

<script src="script/vue.js"></script>

<script>
    let vue = new Vue({
        el: '#root',
         methods:{
            test:function(){
                alert("执行了方法1");
            }
         }
    });

    new Vue({
        el: '#test',
        data: {
            message: '张三',
            address: '云南省大理白族自治州祥云县鹿鸣乡'
        },
        methods: {
            change(){
                console.log(this);
                this._data.message = '数据修改了';
            }
        }
    })
</script>
</body>
</html>
